<template>
  <div class="employees">
    <!-- 调用组件的地方 -->
    <head-tool>
      <template #right>
        <el-button type="danger" @click="doExport">导出</el-button>
        <el-button @click="$router.push('/import?type=user')" type="primary"
          >导入</el-button
        >
        <el-button
          @click="$refs.addEmp.showDialog = true"
          type="primary"
          icon="el-icon-plus"
          >新增员工</el-button
        >
      </template>
    </head-tool>

    <el-card class="table-card">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="username" label="姓名"> </el-table-column>
        <el-table-column prop="staffPhoto" label="头像">
          <template v-slot="scope">
            <img
              class="icon"
              v-imgerror="defaultImg"
              :src="scope.row.staffPhoto"
              alt=""
              @click="showQrcode(scope.row.staffPhoto)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" width="180">
        </el-table-column>
        <el-table-column prop="workNumber" label="工号"> </el-table-column>
        <el-table-column prop="formOfEmployment" label="聘用形式">
          <template v-slot="scope">
            {{ formatHireType(scope.row.formOfEmployment) }}
          </template>
        </el-table-column>
        <el-table-column prop="departmentName" label="部门"> </el-table-column>
        <el-table-column prop="timeOfEntry" label="入职时间" width="120">
        </el-table-column>
        <el-table-column prop="enableState" label="状态"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="280">
          <template v-slot="scope">
            <el-button
              v-if="checkPoint('view_emp')"
              @click="$router.push(`/employees/detail/${scope.row.id}`)"
              type="text"
              size="small"
              >查看</el-button
            >
            <el-button type="text" size="small">转正</el-button>
            <el-button v-if="checkPoint('change_emp')" type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>
            <el-button @click="clickRole(scope.row.id)" type="text" size="small"
              >角色</el-button
            >
            <el-button v-if="checkPoint('del_emp')" @click="del(scope.row.id)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align:center">
        <el-pagination
          @current-change="loadData"
          :current-page.sync="page"
          :page-size="size"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>

    <add-emp ref="addEmp" />
    <!-- 弹出二维码的对话框 -->
    <!-- 饿了么ui里的对话框是一种懒加载的形式，第一次启动时发现是false -->
    <!-- 就压根不会渲染它里面的内容，只要等它的值为true才会去渲染 -->
    <el-dialog title="图片二维码" :visible.sync="qrDialog">
      <canvas ref="ca"></canvas>
    </el-dialog>

    <!-- 分配角色组件 -->
    <assign-role ref="role" />
  </div>
</template>

<script>
// 导入接口
import { empList, delEmp } from '@/api/employees'
import { roleListAPI } from '@/api/roles'
import { profileAPI } from '@/api/user'

// 导入枚举
import enumObj from '@/utils/constant/employees'
import AddEmp from './components/AddEmp.vue'
import AssignRole from './components/AssignRole.vue'

// 导入二维码插件
import QRCode from 'qrcode'
export default {
  name: 'employees',
  components: {
    AddEmp,
    AssignRole
  },
  data () {
    return {
      qrDialog: false,
      tableData: [],
      page: 1,
      size: 10,
      total: 0,
      defaultImg: require('@/assets/common/head.jpg')
    }
  },

  methods: {
    // 点击角色按钮触发的事件
    async clickRole (id) {
      // 还得查出最新角色列表，并赋值给对话框的多选框
      const res = await roleListAPI({
        page: 1,
        pagesize: 9999999
      })
      this.$refs.role.roleList = res.data.rows

      // 查出当前被点的员工所拥有的角色（也就是查基本资料）
      const res2 = await profileAPI(id)
      // 把查出来的数据给这个对话框组件里的checkList就能设置默认选中了
      this.$refs.role.checkList = res2.data.roleIds

      // 把id传递给对话框，因为它内部做确定时要用
      this.$refs.role.id = id

      // 显示出角色对话框
      this.$refs.role.roleDialog = true
    },
    async showQrcode (url) {
      // 显示出对话框 - dom渲染是异步的
      this.qrDialog = true
      await this.$nextTick()
      // 后面的代码一定是等下次dom更新完了后调用了，那么肯定就能好到canvas
      // 就能绘制二维码
      // 需要显示成二维码
      QRCode.toCanvas(this.$refs.ca, url)
    },
    // 导出的点击事件
    doExport () {
      import('@/vendor/Export2Excel').then(async excel => {
        // 查出所有员工
        const res = await empList({
          page: 1,
          size: 99999999
        })
        // 数据拿到了，但是拿到的数据的表头（属性名）是英文的，但是导出要搞中文的
        const list = res.data.rows

        const userRelations = {
          入职日期: 'timeOfEntry',
          手机号: 'mobile',
          姓名: 'username',
          转正日期: 'correctionTime',
          工号: 'workNumber',
          聘用形式: 'formOfEmployment',
          所在部门: 'departmentName'
        }
        // 表头
        const header = []
        // 此时我们需要根据上面的对象进行遍历，有多少个属性就要产生多少列的表头
        for (const key in userRelations) {
          // 加到表头
          header.push(key)
          // 加到内容
        }
        // 循环完了，header里就有对应的中文表头了
        // 但是还缺内容
        // 内容
        // 数据一共有46条，那么内容也应该是一个长度为46的数组
        const data = list.map(v => {
          const arr = []
          // 遍历表头
          for (const key in userRelations) {
            const enKey = userRelations[key]
            arr.push(v[enKey])
          }
          return arr
        })

        excel.export_json_to_excel({
          header, //表头 必填
          data, //具体数据 必填
          filename: '员工列表', //非必填
          autoWidth: true, //非必填
          bookType: 'xlsx' //非必填
        })
      })
    },
    // 加载数据的方法
    async loadData () {
      const res = await empList({
        page: this.page,
        size: this.size
      })
      this.tableData = res.data.rows
      this.total = res.data.total
    },

    // 处理聘用形式
    formatHireType (id) {
      // 因为服务器返回的聘用形式可能是数字也可能是字符串
      // 所以最好不要用全等
      const obj = enumObj.hireType.find(v => v.id == id)
      return obj.value
    },

    // 删除的点击事件
    async del (id) {
      try {
        await this.$confirm('是否确定要删除此员工?', '是否删除')
        // 点了确定，发请求
        await delEmp(id)
        // 弹出提示
        this.$message.success('删除成功')
        // 刷新数据
        // 判断当前是不是只有一条，只有一条就应该刷新上一页
        if (this.tableData.length == 1) {
          this.page--

          if (this.page < 1) this.page = 1
        }
        this.loadData()
      } catch {}
    }
  },

  created () {
    // 加载数据
    this.loadData()
  }
}
</script>

<style lang="scss" scoped>
.employees {
  padding: 15px;
  .table-card {
    margin-top: 20px;
    .icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
  }
}
</style>
